<template>
  <div class="app-container">
    <!-- <span class="title">个人申请与审核</span>
    <el-divider></el-divider> -->
    <div class="filter-container">
      <el-form inline>
        <el-form-item label="项目类型">
          <el-select placeholder="项目类型" v-model="listQuery.type">
            <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.type" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属区县">
          <el-select placeholder="所属区县" v-model="listQuery.district" clearable>
            <el-option v-for="(item,index) in quxianList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="changePage()" type="primary">查询</el-button>
          <el-button @click="daochu()" type="primary">导出报表</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="加载中" highlight-current-row>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column show-overflow-tooltip prop="stage" label="类别"></el-table-column>
      <el-table-column show-overflow-tooltip prop="totalArea" label="累计至当年当月"></el-table-column>
      <el-table-column show-overflow-tooltip prop="annualArea" :label="yearData+'年新增'"></el-table-column>
      <el-table-column show-overflow-tooltip prop="quarterArea" label="3月新增"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getMyDownListType,getDistList,projectStageStatistics,exportProjectStageStatistics } from "@/api/tongji";

export default {
  filters: {},
  data() {
    return {
      list: null,
      total: null,
      listLoading: false,
      listQuery: {
        district: '',
        type: 0,
      },
      yearData:'',
      typeList:[], //项目类型列表
      quxianList:[], //区县列表
    };
  },
  created() {
    var myDate = new Date();
    this.yearData = myDate.getFullYear();
    this.getTypeList()
    this.getAreaData()
    this.fetchData()
  },
  methods: {
    //导出
    daochu(){
      var a = document.createElement("a");
      var obj = ""
      var checkNullorNot = 0
      var objArr = this.listQuery
      for (var index in objArr) {
        if(objArr[index]!==''&&objArr[index]!=null){
          obj += "&" + index + "=" + objArr[index]
          checkNullorNot++
        }
      }
      if(checkNullorNot != 0){
        obj = obj.substr(1)
        obj = '?' + obj
      }
      console.log(obj,"携带参数")
      a.setAttribute(
        "href",
        this.$https +
          "/renovation/project/export/exportProjectStageStatistics" + obj
      );
      a.click();
    },
    //获取所有项目类型
    getTypeList(){
      getMyDownListType().then(res =>{
        this.typeList = res.data
      })
    },
    //获取所有区县
    getAreaData(){
      getDistList().then(res =>{
        this.quxianList = res.data
      })
    },
    fetchData() {
      this.listLoading = true;
      var data={}
      var objArr=this.listQuery
      for (var index in objArr) {
        if(objArr[index]!==''&&objArr[index]!=null){
          data[index]=objArr[index];
        }
      }
      projectStageStatistics(data)
        .then(res => {
          this.listLoading = false;
          this.list = res.data;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    changePage() {
      // this.listQuery.page = page;
      this.fetchData();
    }
  }
};
</script>
